<template>
  <view class="content">
    <view class="list">
      <view class="list-item" v-for="(item, index) in qiugoulist" @click="go(item.id)">
        <view class="title">
          <text class="tit">{{item.title}}</text>
          <text class="weight">{{item.num}} <text class="dun">吨</text> </text>
          <u-tag
			v-if="item.procurement_ycle == 0"
            size="mini"
            text="单次采购"
            color="#016FDD"
            bg-color="#e8f1fb"
            border-color="#e8f1fb"
          ></u-tag>
		  <u-tag
		  			v-if="item.procurement_ycle == 1"
		    size="mini"
		    text="每月采购"
		    color="#016FDD"
		    bg-color="#e8f1fb"
		    border-color="#e8f1fb"
		  ></u-tag>
		  <u-tag
		  			v-if="item.procurement_ycle == 2"
		    size="mini"
		    text="不限次采购"
		    color="#016FDD"
		    bg-color="#e8f1fb"
		    border-color="#e8f1fb"
		  ></u-tag>
          <text class="time" v-if="item.hour < 24">{{item.hour}}小时前</text>
		  <text class="time" v-else>{{item.day}}天前</text>
        </view>
        <p class="desc descs">
          {{item.remark}}
        </p>
        <p class="desc">规格：{{item.sku}}</p>
        <view class="address desc">
          收货地：{{item.address}}
          <view class="hande"> 去报价 </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "index",
  components: {},
  props:{
	qiugoulist:{
		type:Array
	}  
  },
  data() {
    return {
      list: [{}, {}, {}, {}, {}, {}, {}],
    };
  },
  methods: {
    go(e) {
      uni.navigateTo({ url: "/pages/buy/buyDetails?id="+e });
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.dun{
  font-size: 26rpx;
}
.content {
  margin: 20rpx;

  .list {
    .list-item {
      margin-bottom: 20rpx;
      border-right: 12rpx;
      padding: 30rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      gap: 10rpx;
      color: #666666;
      font-size: 28rpx;

      .address {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .hande {
          width: 118rpx;
          height: 56rpx;
          text-align: center;
          line-height: 56rpx;
          color: #ffffff;
          border-radius: 88rpx;
          font-size: 26rpx;
          background: linear-gradient(90deg, #0096ff 0%, #003db1 100%);
        }
      }

      .title {
        font-size: 32rpx;
        display: flex;
        align-items: flex-end;
        color: #131313;
        gap: 20rpx;
        font-weight: 500;
        .tit {
          font-size: 16px;
          font-weight: 700;
        }
        .weight {
          color: #ff4435;
          font-weight: 700;
        }

        .time {
          color: #999999;
          flex: 1;
          font-size: 28rpx;
          font-weight: 400;
          text-align: right;
        }
      }
      .descs {
        margin-top: 10rpx;
      }
      .desc {
        font-size: 28rpx;
        font-weight: 400;
        line-height: 40rpx;
        text-align: left;
        color: #666;
      }
      .tag {
        gap: 20rpx;
      }

      .price {
        display: flex;
        align-items: end;
        gap: 20rpx;

        .num {
          color: #686868;
          font-size: 20rpx;
          font-weight: 400;
          margin-bottom: 4rpx;
        }

        .money {
          font-weight: 700;

          text {
            font-size: 40rpx;
            font-weight: 500;
          }
        }
      }

      img {
        width: 100px;
        height: 100px;
      }
    }
  }
}
</style>
